<script setup>
// 需要发送的数据
import { getCurrentInstance, reactive, ref } from 'vue';
import { getTplType, insertTpl, updateTpl } from '@/api/tpl.js';
import { getIsAdmin } from '@/utils/cookie.js';

const instance = getCurrentInstance();
const { $message, $lodash } = instance.appContext.config.globalProperties;
const isAdmin = getIsAdmin();

const $emit = defineEmits(['close']);
const props = defineProps({
  editData: {
    type: Object,
    default: () => {},
  },
});
const sendData = reactive({
  tplName: '',
  typeCode: '',
  typeName: '',
  englishPos: '',
  tag: '',
  file: null,
  fileName: '',
});
const modeTypeOption = ref([]);
const englishTypeOption = ref([]);
// 获取模版类型
async function getAllTplType() {
  const returnData = await getTplType();
  if (returnData?.code === 200) {
    modeTypeOption.value = returnData?.data;
  }

  englishTypeOption.value = [
    {
      label: '无英文内容',
      value: 0,
    },
    {
      label: '英文内容在中间',
      value: 1,
    },
    {
      label: '英文内容在最后',
      value: 2,
    },
  ];
}
getAllTplType();
// 管理员编辑情况
function edit() {
  if (isAdmin === 'true' && !$lodash.isEmpty(props.editData)) {
    console.log(props.editData);
    Object.assign(sendData, props.editData);
  }
}
edit();
// 模版类型改变
function modeTypeChange() {
  const selectedItem = modeTypeOption.value.filter((item) => item.typeCode === sendData.typeCode);
  console.log(selectedItem);
  sendData.typeName = selectedItem[0].typeName;
}
// 文档上传
const fileList = ref([]);
function wordUpload(file) {
  fileList.value = [];
  console.log(file);
  sendData.file = file.file;
  sendData.fileName = file.file.name;
}
// 提交数据
async function submitData() {
  const { tplName, fileName, englishPos, file, typeCode, typeName } = sendData;
  if (typeCode === '') {
    $message.error('请选择模版类型');
    return false;
  }
  if (typeName === '') {
    $message.error('请输入刊物名称/学校名称');
    return false;
  }
  if (file === null && isAdmin !== 'true') {
    $message.error('请选择文档');
    return false;
  }
  const formData = new FormData();
  formData.append('tplName', tplName);
  formData.append('typeCode', typeCode);
  formData.append('typeName', typeName);
  formData.append('englishPos', englishPos);
  if (file) {
    formData.append('file', file, fileName);
  }
  formData.append('tag', isAdmin === 'true' ? 1 : 99);
  if (isAdmin === 'true') {
    formData.append('id', props.editData.id || '');
  }
  const api = $lodash.isEmpty(props.editData) ? insertTpl : updateTpl;
  const returnData = await api(formData);
  if (returnData?.code === 200) {
    $message.success('上传成功');
    $emit('close');
  } else {
    $message.error(returnData?.msg);
  }
}
</script>

<template>
  <el-dialog :model-value="true" :show-close="false" class="add-tpl-dialog" @close="$emit('close')">
    <template #title>
      <div class="title">添加弹窗</div>
    </template>
    <div class="content">
      <div class="mode-type-select">
        <div class="label">模板类型</div>
        <el-select
          class="type-select"
          placeholder="请选择模版类型"
          v-model="sendData.typeCode"
          @change="modeTypeChange"
        >
          <el-option
            v-for="item in modeTypeOption"
            :label="item.typeName"
            :value="item.typeCode"
            :key="item.typeCode"
          />
        </el-select>
      </div>
      <div class="mode-type-select">
        <div class="label">英文内容位置</div>
        <el-select class="type-select" placeholder="英文内容位置" v-model="sendData.englishPos">
          <el-option
            v-for="item in englishTypeOption"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          />
        </el-select>
      </div>
      <div class="name-box">
        <div class="label name-label">刊物名称/学校名称</div>
        <el-input
          v-model="sendData.tplName"
          placeholder="请输入刊物名称/学校名称"
          class="name-input"
        />
      </div>
      <div class="upload-file-box">
        <el-upload
          :file-list="fileList"
          accept=".doc, .docx"
          :http-request="wordUpload"
          :show-file-list="false"
          :limit="1"
        >
          <div class="upload-btn">选择文档</div>
        </el-upload>
        <div class="file-name-box" v-show="sendData.fileName">
          <div class="file-name">{{ sendData.fileName }}</div>
          <img src="@/assets/images/personalCenter/success.png" alt="" />
        </div>
      </div>
      <div class="sure-btn" @click="submitData">确定</div>
    </div>
  </el-dialog>
</template>

<style scoped lang="less">
@import './addTplDialog.less';
</style>
